<template>
	<view class="detail-box">
		<toolTabs v-model="current" />
		<view class="content-box" v-show="current==0">
			<!-- 当前周期 -->
			<view class="current-cycle">
				<view class="top-flex">
					<view class="left">
						<view class="label">我的安全积分</view>
						<view class="item-flex">
							<view class="num">{{info.grade}}</view>
							<view class="text">上限100</view>
						</view>
						<view class="item-flex">
							<view class="title">统计日期：</view>
							<view class="text">{{info.evalSection}}</view>
						</view>
						<view class="item-flex">
							<view class="title">评估期：</view>
							<view class="text">{{info.evalSectionStage}}</view>
						</view>
						<!-- <view class="btn" @click="$goBack('appeal-history')">申诉历史</view> -->
					</view>
					<view class="right">
						<view class="uqrcode">
							<view class="uqrcode-border" :style="[{borderColor:uqrCodeList[uqrCodeType].color}]">
								<canvas canvas-id="uqrcode"></canvas>
							</view>
						</view>
						<view class="uqrcode-text" :style="[{color:uqrCodeList[uqrCodeType].color}]">
							{{uqrCodeList[uqrCodeType].text}}
						</view>
					</view>
				</view>
				<view class="data-summary">
					<view class="tip">当前评估期：积分数据汇总</view>
					<view class="data-head">
						<view class="data-head-item">指标项</view>
						<view class="data-head-item">分值变化</view>
					</view>
					<view class="data-list">
						<dataSummary v-for="(item,i) in archiveItemTable" :key="i" :item="item"
							@click.native="handleItem(i,item)" :icon="item.itemCode != 'aqjs'" />
					</view>
				</view>
			</view>
		</view>

		<view class="content-box" v-show="current==1">
			<view class="history-cycle">
				<view class="box-list">
					<view class="box-item" v-for="(item,index) in historyCycle" :key="index"
						@click="historyCycleDetail(item)">
						<view class="label">
							<view class="img-icon" type="info"></view>{{item.resultDetail.archiveName}}
						</view>
						<view class="items">
							<view class="item">
								<view class="item-label">所属行政区划</view>
								<view class="item-content">{{item.resultDetail.areaName}}</view>
							</view>
							<view class="item">
								<view class="item-label">从业资格证号</view>
								<view class="item-content">{{item.resultDetail.archiveCode}}</view>
							</view>
							<view class="item">
								<view class="item-label">所属企业</view>
								<view class="item-content">{{item.resultDetail.ownerName}}</view>
							</view>
							<view class="item">
								<view class="item-label">评估得分</view>
								<view class="item-content">{{item.resultDetail.grade}}</view>
							</view>
							<view class="item">
								<view class="item-label">评估期</view>
								<view class="item-content">{{item.evalSectionStage}}</view>
							</view>
						</view>
					</view>
					<emptyWaybill v-if="historyCycle.length==0" />
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import emptyWaybill from "@/components/tool-empty/waybill";
	import toolTabs from "@/components/tool-tabs/tool-tabs";
	import dataSummary from "@/components/tool-card/data-summary";
	import uQRCode from '@/common/uqrcode.js'; //引入uqrcode.js
	export default {
		components: {
			toolTabs,
			dataSummary,
			emptyWaybill,
		},
		data() {
			return {
				current: 0,
				// 安全码信息
				uqrCodeList: {
					A: {
						color: '#409EFF',
						text: '蓝码'
					},
					B: {
						color: '#FFD04D',
						text: '黄码'
					},
					C: {
						color: '#F56C6C',
						text: '红码'
					}
				},
				uqrCodeType: 'A',
				info: {
					evalSectionStage: '-',
					grade: '-',
					evalSection: "-"
				},
				// 当前周期积分详情
				archiveItemTable: [],
				// 历史周期
				historyCycle: []
			}
		},
		watch: {
			current(current) {
				if (current) {
					this.archiveItemBefore();
				}
			}
		},
		onLoad() {
			const tempData = this.$store.getters.getTempData;
			if (tempData && tempData.resData) {
				const resData = tempData.resData;
				this.resData = resData;
				Object.assign(this.info, {
					evalSectionStage: resData.evalSectionStage,
					grade: resData.grade,
					evalSection: resData.evalSection
				})
				this.uqrCodeType = resData.levels;
				this.$api.archiveItem({
					archiveCode: resData.archiveCode,
					period: 'D',
					evalSection: resData.evalSection,
					historyCycles: resData.historyCycles,
				}).then(res => {
					this.info.evalSectionStage = res.data.data.evalSectionStage;
					this.archiveItemTable = res.data.data.assArchiveDetailSumVOS;
					this.qrFun()
					// 把结果存储起来
					tempData.archiveItemTable = res.data.data.assArchiveDetailSumVOS;
					this.$store.commit('set_tempData', tempData);

				})
			}
		},
		methods: {
			qrFun() {
				uQRCode.make({
					canvasId: 'uqrcode',
					componentInstance: this,
					text: JSON.stringify(this.info),
					size: 60,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: this.uqrCodeList[this.uqrCodeType].color,
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						// console.log(res);
					},
				})
			},
			handleItem(i, item) {
				if (item.itemCode !== 'aqjs') {
					this.$goBack('./personnel-evaluation-detail?i=' + i)
				}
			},
			historyCycleDetail(item) {
				const params = {
					evalSectionStage: item.evalSectionStage,
					grade: item.resultDetail.grade,
					evalSection: item.resultDetail.evalSection,
					levels: item.resultDetail.levels,
					archiveCode: item.resultDetail.archiveCode,
					period: 'D',
					historyCycles: item.resultDetail.historyCycles,
				}
				this.$goBack('./personnel-history-cycle?params=' + JSON.stringify(params))
			},
			archiveItemBefore() {
				if (this.historyCycle.length == 0) {
					let archiveCode = this.resData.archiveCode
					this.$api.archiveItemBefore({
							archiveCode
						})
						.then(res => {
							this.historyCycle = res.data.data;
						})
						.catch(() => {})
				}
			}
		}
	}
</script>

<style lang="scss">
	.detail-box {
		background: #f8f8f8;
		height: 100vh;

		.current-cycle {
			padding: 20rpx 30rpx;

			.top-flex {
				display: flex;
				align-items: center;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 6rpx 1px rgba(84, 83, 83, 0.16);
				border-radius: 8rpx;
				padding: 24rpx 30rpx;
				margin-bottom: 30rpx;

				.left {
					flex: 1;

					.label {
						font-size: 24rpx;
						color: #333;
						margin-bottom: 20rpx;
					}

					.item-flex {
						display: flex;
						font-size: 24rpx;
						color: #333;
						line-height: 32rpx;
						margin-bottom: 16rpx;

						.title {
							color: #666;
						}

						.num {
							font-size: 36rpx;
							padding-right: 30rpx;
						}
					}

					.btn {
						line-height: 42rpx;
						background: #007AFF;
						border-radius: 10rpx;
						font-size: 24rpx;
						color: #fff;
						display: inline-block;
						padding: 0 20rpx;
					}
				}

				.right {
					// 此处部分用px单位，因为二维码生成的大小单位是px
					width: 72px;
					border-left: 1px solid #eee;
					padding: 10px 0 10px 20px;

					.uqrcode-border {
						margin: 0 auto;
						width: 60px;
						height: 60px;
						border: 6rpx solid;
						padding: 6rpx;
						margin-bottom: 12rpx;
					}

					.uqrcode-text {
						text-align: center;
						font-size: 28rpx;
					}
				}
			}

			.data-summary {
				background: #fff;
				border-radius: 8rpx;
				padding: 10rpx 20rpx;
				box-shadow: 0px 4rpx 6rpx 1px rgba(84, 83, 83, 0.16);

				.tip {
					color: #007AFF;
					padding-bottom: 10rpx;
				}

				.data-head {
					display: flex;
					background: #007AFF;
					font-weight: bold;
					padding: 10rpx 30rpx;
					border-radius: 8rpx;

					.data-head-item {
						flex: 1;

						&:nth-child(2) {
							text-align: right;
							border-left: 1rpx solid #fff;
						}
					}
				}

				.data-list {
					padding: 20rpx 0;

					.item-box {
						margin-bottom: 20rpx;
					}
				}
			}
		}

		.box-list {
			padding: 20rpx 30rpx;

			.box-item {
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 14rpx;

				.label {
					font-size: 28rpx;
					color: #333;
					line-height: 30rpx;
					height: 30rpx;
					padding: 26rpx;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #F0F0F0;


					.img-icon {
						margin-right: 10rpx;
					}
				}

				.items {
					padding: 14rpx 28rpx;

					.item {
						font-size: 28rpx;
						line-height: 42rpx;
						padding: 14rpx 0;
						display: flex;

						.item-label {
							color: #666;
							width: 200rpx;
						}

						.item-content {
							color: #333;
							flex: 1;
						}
					}

				}
			}
		}


	}
</style>